import { Card } from "@/components/base";
import { Typography } from "@/components/typography";
import { PageController } from "../../page-controller";
import * as dataDictionary from "@shared/constant/dataDictionary";
import { useObserver } from "mobx-react-lite";
import React from "react";

const { Text } = Typography;

export function ScalpInfo() {
    const pageController = React.useContext(PageController.Context);
    const data = useObserver(() => pageController.data);

    return (
        <Card style={{ marginBottom: '16px' }}>
            <Text size={16} strong style={{ display: 'block', marginBottom: '12px' }}>
                头皮信息
            </Text>
            <div style={{ marginBottom: '8px' }}>
                <Text size={14} type="secondary">发质类型：</Text>
                <Text size={14}>{dataDictionary.hairTypeStr[data?.hairType] || '--'}</Text>
            </div>
            <div style={{ marginBottom: '8px' }}>
                <Text size={14} type="secondary">头皮状况：</Text>
                <Text size={14}>{dataDictionary.scalpConditionsStr[data?.scalpCondition] || '--'}</Text>
            </div>
            <div style={{ marginBottom: '8px' }}>
                <Text size={14} type="secondary">过敏史：</Text>
                <Text size={14}>{data?.allergyHistory || '--'}</Text>
            </div>
            <div>
                <Text size={14} type="secondary">备注：</Text>
                <Text size={14}>{data?.preference || '--'}</Text>
            </div>
        </Card>
    );
}
